<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>修改信息</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.validate.min.js"></script>
    <link rel="stylesheet" href="./js/bootstrap.min.js">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #fff;
            margin: 0;
            padding: 0;
        }

        .register-container {
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
        }

        .register-container h2 {
            font-weight: 600;
            font-size: 32px;
            letter-spacing: 1px;
            color: #000000;
            line-height: 50px;
            text-align: center;
            margin-bottom: 60px;
        }

        .show-password {
            float: right;
            cursor: pointer;
            color: #008CBA;
        }
    </style>
</head>

<body>
    <div class="register-container">
        <h2>修改用户信息</h2>
        <form id="registerForm">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名" required>
            </div>
            <div class="form-group">
                <label for="mail">邮箱</label>
                <input type="email" class="form-control" id="mail" name="mail" placeholder="请输入邮箱" required>
            </div>
            <div class="form-group">
                <label for="phoneNumber">手机号</label>
                <input type="text" class="form-control" id="phoneNumber" name="phoneNumber" placeholder="请输入手机号"
                    required>
            </div>
            <button class="btn btn-primary btn-block" onclick="cancelModify()">取消修改</button>
            <button type="submit" class="btn btn-primary btn-block">确认修改</button>
        </form>
    </div>

    <script>
        // 获取当前页面的URL
        const url = new URL(window.location.href);
        // 使用URLSearchParams解析查询参数
        const params = new URLSearchParams(url.search);
        // 获取名为userId的参数值
        const userId = params.get('userId');

        var userToken = localStorage.getItem("user_token");

        //向后端发送请求获取用户信息
        function getUserInfo() {
            console.log("获取用户信息: userId:" + userId);
            $.ajax({
                url: '/user/userInfo?userId=' + userId,
                type: 'get',
                headers: {
                    // jwt
                    "user_token": userToken
                },
                success: function (result) {
                    if (result.code != 200) {
                        alert("获取用户信息发送错误!");
                    } else {
                        var user = result.data;
                        // 填充姓名输入框
                        document.getElementById('name').value = user.name;
                        // 填充邮箱输入框
                        document.getElementById('mail').value = user.mail;
                        // 填充手机号输入框
                        document.getElementById('phoneNumber').value = user.phoneNumber;
                    }
                }
            });
        }
        getUserInfo();


        // 使用jQuery Validate插件来验证表单
        $("#registerForm").validate({
            rules: {
                name: "required",
                mail: {
                    required: true,
                    email: true
                },
                phoneNumber: "required",
            },
            messages: {
                name: "请输入您的姓名",
                mail: "请输入有效的邮箱地址",
                phoneNumber: "请输入您的手机号",
            },
            submitHandler: function (form) {
                var formData = {
                    id: userId,
                    name: $('#name').val(),
                    mail: $('#mail').val(),
                    phoneNumber: $('#phoneNumber').val(),
                };

                // 表单验证通过后，发送AJAX请求
                $.ajax({
                    url: '/user/update',
                    type: 'post',
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    headers: {
                        // jwt
                        "user_token": userToken
                    },
                    success: function (result) {
                        if (result.code != 200) {
                            alert("修改信息失败! " + result.msg);
                        } else {
                            alert("修改用户信息成功!");
                            //给父页面发消息, 表示要跳转到人员列表页
                            window.parent.postMessage(
                                {
                                    from: 'user-list.html',
                                    id: '#userList'
                                }, '*'
                            );
                        }
                    }
                });
                return false; // 阻止表单的默认提交行为
            }
        });

        //取消修改
        function cancelModify() {
            window.location.href = "/user-list.html";
        }
    </script>
</body>

</html>